var path=require("path");
var webpack=require("webpack");
var  htmlWebpackPlugin =  require("html-webpack-plugin");
var openBrowserWebpackPlugin =require("open-browser-webpack-plugin");
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");  // 抽离样式 css文件
module.exports ={
    entry:["./src/index.js"],
    devtool:"source-map",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"js/[name].[hash:8].js" ,//hash：8 md5 
        publicPath:"/"
    },

    module:{
        rules:[
            {
                test:/\.js[x]?$/,
                use:["babel-loader"],
                exclude:[path.resolve(__dirname,"node_modules")]
            },
            {
                test:/\.(css|scss)$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:"style-loader",   // 转成node 风格的js代码
                    use:["css-loader",{    // css-loader 打包成模块  
                        loader:"postcss-loader",
                        options:{
                            plugins:function(){
                                return [
                                    require("cssgrace"),     // 美化代码 
                                    require("postcss-px2rem")({remUnit:100}),
                                    require("autoprefixer")()    // 自动补全 
                                ]
                            }
                        }
                    },"sass-loader"]
                })
            },

            //打包图片
            {
                test:/\.(gif|jpg|png|woff|woff2|svg|eot|ttf)\??.*$/,
                use:["url-loader?limit=8192&name=font/[hash:8].[ext]"]                
            },

        ]
    },
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        compress:true,
        hot:true,
        host:"0.0.0.0",
        port:9999,
        publicPath:"/",
        historyApiFallback: true,    // html5 history api 
        disableHostCheck: true,

    },
    resolve: {
		alias: {   //别名  react
            "react":path.join(__dirname, 'node_modules', 'react')
		}
	},
    plugins:[
        new openBrowserWebpackPlugin({
            url:"http://localhost:9999"
        }),

        new htmlWebpackPlugin({
            template:"./src/index.html",   // index.html
            inject:true,    // 自动注入  js/css
        }),

        //抽离样式
        new ExtractTextWebpackPlugin({
            filename:"app.[hash:8].css",   
            allChunks:true,
            disable:false 
        }),

        new webpack.HotModuleReplacementPlugin()


    ]

}